<template>
  <div class="view-swiper">
    <!--把图片提前 require 传给一个变量再传给组件ImgSrc -->
    <div class="mb-10">
      <Test img-src="../../assets/img/home-logo.png"></Test>
    </div>
    <swiper :options="swiperOption">
      <swiper-slide v-for="(item, index) in headerList" :key="index">
        <img :src="item.src" @error="handleError" class="swiper-img" />
      </swiper-slide>
      <!--分页 -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import Test from "./Test.vue";
import { Tools } from "@/model/tools.ts";
import { HeaderList } from "@/store/interface.ts";
import "swiper/dist/css/swiper.css";
@Component({
  components: { swiper, swiperSlide, Test }
})
export default class HeaderSwiper extends Tools {
  private swiperOption: Object = {
    notNextTick: true,
    autoplay: {
      delay: 3000,
      stopOnLastSlide: false,
      disableOnInteraction: false
    },
    direction: "horizontal",
    pagination: {
      el: ".swiper-pagination"
    },
    loop: true, //开启轮播图前后循环模式
    preventClicks: true //默认true
  };
  private headerList: Array<HeaderList> = [
    {
      src: require("@assets/img/why_2.png")
    },
    {
      src: require("@assets/img/why_0.png")
    },
    {
      src: ""
    }
  ];

  /**
   * 有些时候后台返回图片地址不一定能打开,所以这个时候应该加一张默认图片
   */
  private handleError(e) {
    e.target.src = require("@assets/img/why_1.png"); //当然如果项目配置了transformToRequire
  }
}
</script>
<style lang="stylus" scoped>
>>>.swiper-pagination-bullets {
  bottom: 50px
  .swiper-pagination-bullet {
    width: 30px
    height: 2px
    border-radius: 0
    background: #fff
  }
}
.view-swiper {
  overflow: hidden
  width: 100%
  .swiper-img {
    width: 100%
    height: 400px
  }
}
</style>
